<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .editor-label {
 margin: 0px 0 0 0;
 height: 33px;
 display: inline-block;
 width: 300px;
 min-width: 300px;
 position: relative;
}
.editor-label label {
 width: 120px;
 font-size: 14px;
 line-height: 30px;
 display: inline-block;
 text-align: right;
}
.editor-label input[type='text'], .editor-label select, .editor-box input[type='text'], .editor-box select {
 height: 23px;
 border: 1px solid #ddd;
 padding-left: 10px;
 font-size: 13px;
 border-radius: 3px;
 width: 140px;
}
</style>
<body>
  <script>
function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child (name, age) {

    Parent.call(this, name);
    
    this.age = age;

}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('kevin', '18');

child1.colors.push('black');

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]
  </script>
</body>
</html>